@include keyframes('interpreter-dialog-expand') {
	from {
		width: 480px;
	}
	to {
		width: 1000px;
	}
}

@include keyframes('interpreter-dialog-fold') {
	from {
		width: 1000px;
	}
	to {
		width: 480px;
	}
}

@include keyframes('interpreter-content-wrap-expand') {
	from {
		clip: rect(0 480px 470px 0);
	}
	to {
		clip: rect(0 1000px 470px 0);
	}
}

@include keyframes('interpreter-content-wrap-fold') {
	from {
		clip: rect(0 1000px 470px 0);
	}
	to {
		clip: rect(0 480px 470px 0);
	}
}

.interpreter-dialog {
	width: 480px;

	.x-dialog-title {
		height: 40px;
		line-height: 40px;
		text-align: left;
		color: #201412;
		background-color: #dbdbdb;

		.x-dialog-icon {
			width: 40px;
			height: 40px;
			float: left;
			background: url('../image/logo.png') no-repeat center;
			background-size: 30px 30px;
		}
	}
	
	.x-dialog-content {
		height: 470px;
		display: block;
		position: relative;

		.x-btn {
			height: 30px;
			letter-spacing: 1px;
			border: 1px solid #c7c7c7;
			background-color: #f8f8f8;
			color: #676767;

			&:hover {
				background-color: #dbdbdb;
			}

			&.disabled {
				border-color: #eee;
				background-color: #fcfcfc;
				color: #bbb;

				&:hover {
					background-color: #fcfcfc;
				}
			}

			&.connect {
				width: 60px;
				margin-left: 10px;
				margin-right: 20px;
			}

			&.reset {
				width: 60px;
			}
			
			&.advance {
				width: 72px;
				text-align: center;
				float: right;
				margin-right: 10px;
			}

			&.prog {
				width: 60px;
				margin-left: 10px;
				margin-right: 20px;
			}

			&.run {
				width: 60px;
				margin-right: 20px;
			}

			&.save {
				width: 60px;
				margin-right: 20px;
			}

			&.list {
				width: 60px;
			}
		}

		.auto-run-label {
			font-weight: normal;
			margin: 0 20px 0 0;
			float: right;

			.auto-run {
				margin-right: 5px;
			}

			&.disabled {
				color: #bbb;
			}
		}

		& > .wrap {
			position: absolute;
			height: 100%;
			width: 1000px;
			clip: rect(0 480px 470px 0);
		}

		.left {
			width: 480px;
			position: absolute;

			.terminal, .cmd {
				font-family: 'Microsoft YaHei';
				font-size: 14px;
				line-height: 20px;
				color: #676767;
				background-color: #f2f2f2;
			}

			.terminal .terminal-output div div, .cmd .prompt {
				line-height: 20px;
			}
		}

		.right {
			width: 520px;
			right: 0;
			position: absolute;

			.bottom {
				background-color: white;

				.code {
					width: 100%;
					height: 100%;
					padding: 10px;
				}
			}
		}

		.top {
			padding-top: 10px;
			height: 50px;
			border-bottom: 1px solid #b3b3b3;
		}

		.bottom {
			height: 420px;
		}
	}

	&.senior {
		width: 1000px;

		.x-dialog-content {
			& > .wrap {
				clip: auto;
			}
		}
	}

	&.x-expand {
		@include animation('interpreter-dialog-expand' 0.3s cubic-bezier(0, 0.8, 0.1, 1) both);

		.x-dialog-content {
			& > .wrap {
				@include animation('interpreter-content-wrap-expand' 0.3s cubic-bezier(0, 0.8, 0.1, 1) both);
			}
		}
	}

	&.x-fold {
		@include animation('interpreter-dialog-fold' 0.3s cubic-bezier(0.8, 0, 1, 0.1) forwards);

		.x-dialog-content {
			& > .wrap {
				@include animation('interpreter-content-wrap-fold' 0.3s cubic-bezier(0.8, 0, 1, 0.1) forwards);
			}
		}
	}
}